<template>
  <music-list
    :bgImage="bgImage"
    :title="title"
    :songs="songs"
    ></music-list>
</template>

<script>
import { mapGetters } from 'vuex'
import { getDiscDetail } from 'api'
import MusicList from 'components/music-list/music-list'

export default {
  name: 'disc',
  components: {
    MusicList
  },
  data () {
    return {
      songs: []
    }
  },
  created () {
    this._getDiscDetail()
  },
  computed: {
    bgImage () {
      return this.disc.cover
    },
    title () {
      return this.disc.title
    },
    ...mapGetters([
      'disc'
    ])
  },
  methods: {
    _getDiscDetail () {
      if (!this.disc.content_id) {
        this.$router.push({
          path: '/recommend'
        })
        return
      }
      getDiscDetail({
        id: this.disc.content_id
      }).then((data) => {
        // console.log(data)
        if (data) {
          this.songs = data.musicList.map((item) => {
            const { album, albumpic, name, rid, artist, duration } = item
            return {
              album,
              albumpic,
              name,
              artist,
              rid,
              duration
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>
